<template>
  <div>
    <h3>您好 请选择答题范围</h3>

    <!-- checkout选择框 -->
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox
        @change="isDisable"
        v-for="city in cities"
        :label="city"
        :key="city"
        >{{ city }}</el-checkbox
      >
    </el-checkbox-group>
    <!-- checkout选择框结束 -->

    <!-- 摁钮开始 -->
    <el-button
      @click="Start"
      type="primary"
      size="mini"
      style="margin-top: 20px"
      :disabled="btnDisabled"
      >开始答题</el-button
    >
    <!-- 摁钮结束 -->
  </div>
</template>

<script>
const cityOptions = ["文科", "理科", "娱乐", "生活", "文艺", "流行"];
export default {
  name: "Start",
  data() {
    return {
      checkAll: false,
      checkedCities: ["文科", "理科"],
      cities: cityOptions,
      isIndeterminate: true,
      btnDisabled: false,
      // 答对的排行榜
      scoreList: [1, 1, 2, 3],
    };
  },
  created() {
    window.localStorage.getItem("scoreList") === null
      ? window.localStorage.setItem("scoreList", this.scoreList)
      : (this.scoreList = window.localStorage.getItem("scoreList").split(","));
  },
  methods: {
    // 是否选择了范围 如果没选禁止答题
    isDisable() {
      this.btnDisabled = this.checkedCities.length === 0;
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.btnDisabled = this.checkedCities.length === 0;
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 开始答题
    Start() {
      // e.preventDefault();
      this.$set(localStorage, "checkedWords", this.checkedCities);
      // window.localStorage.setItem("checkedWords", this.checkedCities);
      this.$router.push({ path: "/quiz" });
      // console.log(this.checkedCities.length === 0);
      // console.log('haahahahahahhah');
      // window.localStorage.getItem("score") === null ? window.localStorage.setItem("score")
      // console.log(window.localStorage.getItem("123"));
    },
  },
  watch: {
    btnDisabled() {
      if (this.btnDisabled) {
        this.$message.error("请至少选择一门考试科目");
      }
    },
  },
};
</script>

<style>
</style>
